<template>
	<view class="flex-col cart">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="购物车"><view slot="left" class="nav-left"></view></u-navbar>
		</view>
		
		<view v-if="showLogin">
			<view v-if="list.length === 0">
				<view class="flex-col items-center" style="margin-top: 110rpx;">
					<image src="/static/data_empty.png"></image>
					<text style="color: #c0c4cc;">暂无数据</text>
				</view>
			</view>
			
			
			<view v-else>
				<view class="goods-list">
					<view class="btn-clear">
						<!-- <view class="" :class="'text-' + themeColor.name">
							共0件宝贝
						</view> -->
						<view></view>
						<view class="" @click="chooseSwitchover">
							{{adminShow? '完成': '编辑'}}
						</view>
					</view>
					<view class="yh-cart-row">
						<!-- 商品列表 S -->
						<block v-for="(item, index) in list" :key="index">
							<view class="carrier">
								<view class="shop">
									<view class="left">
										<!--image v-if="item.isShop" class="select" :src="selectPitchOn" mode="widthFix" @click="chooseShopSelect(index)"></image>
										<image v-if="!item.isShop" class="select" :src="selectDefault" mode="widthFix" @click="chooseShopSelect(index)"></image> -->
										
										<radio class="select" color='#5c8edc' :checked='item.isShop' @click="chooseShopSelect(index)"/>
										
													
										<view class="shop-name" @click="goShopHome(item)">
											<image class="icon-shop" :src="shopImage" mode="widthFix"></image>
											<view class="name">
												{{item.shop_title}}
											</view>
										</view>
									</view>
									<!-- <image class="right" :src="rightImage" mode="widthFix"></image> -->
								</view>
								<view class="goods" v-for="(gItem, gIndex) in item.cartList" :key="gIndex">
									
									
									<view class="card_medium">
										<!-- <image v-if="!gItem.isDisplay" class="goods-lose-efficacy-identifying" :src="loseEfficacyImage" mode="widthFix"></image> -->
										<view style="width: 10%;">
											<!-- <image class="select" :src="gItem.selected ? selectPitchOn:selectDefault" mode="widthFix" @click="chooseGoodsSelect(index, gIndex)"></image> -->
											<radio class="select" color='#5c8edc' :checked='gItem.selected' @click="chooseGoodsSelect(index, gIndex)"/>
										</view>
			
										
										<view style="width: 30%;">
											<image @click="goProduct(gItem)" mode="aspectFill" :src="gItem.pic_thumb || errirImage" class="card_img"></image>
										</view>
										
										<view class="med_right" @click="goProduct(gItem)">
											<view class="font16 fontbold med_right1">{{gItem.sku_name}}</view>
											<view class="font12 med_right2">{{gItem.sku_data != ''? gItem.sku_data: ''}}</view>
											<view class="flex-row justify-between items-center" style="margin-top: 15rpx;">
												<text style="font-size: 35rpx;color: #5c8edc;">¥{{gItem.sku_sell_price}}</text>
												<view class="amount">
													
													<image @click.stop="chooseMinus(index, gIndex)" src="/static/cart/cart_minus.png" style="width: 35rpx;height: 35rpx;"></image>
													<view class="input-price">
														{{gItem.quantity}}
													</view>
													<image @click.stop="chooseAddNum(index, gIndex)" src="/static/cart/cart_add.png" style="width: 35rpx;height: 35rpx;"></image>
													
												</view>
											</view>
										</view>
									</view>
									
									
									
								</view>
							</view>
						</block>
					</view>
					
				</view>
				
				<view class="goods-settle-accounts">
					<view class="left">
						<radio class="select" color='#5c8edc' :checked='isCheckAll' @click="chooseCheckAll"/>
						<!-- <image class="select" :src="isCheckAll ? selectPitchOn : selectDefault " mode="widthFix" @click="chooseCheckAll"></image> -->
						<!-- <image v-if="!isCheckAll" class="select" :src="selectDefault" mode="widthFix" @click="chooseCheckAll"></image> -->
						全选
					</view>
					<view class="right">
						<block v-if="!adminShow">
							<view class="goods-price-total">
								<text>合计: </text>
								<text style="font-size: 29rpx;">¥ {{total.toFixed(2)}}</text>
							</view>
							<view class="goods-count-btn" @click="cartPay">
								结算
							</view>
						</block>
						<block v-if="adminShow">
							
							<view class="goods-delete" @click="chooseGoodsDelete">
								删除
							</view>
						</block>
					</view>
				</view>
				
				
		
			
			</view>
		
		</view>	
		
		
		
		<view v-else>
			<view class="to-login">
				<image :src="staticResource('common/login.png')" mode="widthFix" />
				<view class="to-login-text">暂未登录</view>
				<view style="width: 114px">
				      <u-button type="primary" shape="circle" @click="handleLogin">去登录</u-button>
					 <!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">去登录</button> -->
				</view>
			</view>
		</view>
		<Tabbar :current-page='3'></Tabbar>
	</view>
</template>
 
<script>
	export default {
	
		data() {
			return {
				errirImage: '/static/cart/error_img.png',
				shopImage: '/static/cart/store_img.png', // 店铺图标
				selectDefault: '/static/cart/shop_unselect.png', // 默认图标 
				selectPitchOn: '/static/cart/shop_select.png', // 选中图标
				loseEfficacyImage: '/static/cart/yishixiao.png', // 失效
				list: [],
				goodsLoseEfficacy: [],
				total: 0, // 选中商品总价
				hasLogin: null,
				// 控制滑动效果
				adminShow: false, // 编辑选择默认false
				isStop: false, // 店铺下所有商品全选/取消全选默认false
				isSelection: false, // 规格选择默认false
				isCheckAll: false, // 购物车全选/反选默认false
				userInfo:{}
			}
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			},
			showLogin(){
				return this.$store.state.token;
			}
		},
		onLoad() {
			
		},
		onShow() {
			let isUpdate = this.$store.state.updateCart;
			console.log("更新购物车:"+isUpdate);
			if(this.$store.state.token && isUpdate){
				this.isCheckAll = false;
				this.list = [];
				this.total = 0;
				this.getCartList();
			}
		},
		onPullDownRefresh() {
			this.isCheckAll = false;
			this.list = [];
			this.total = 0;
			this.getCartList();
		},
		beforeDestroy() {
			this.$store.commit('setCartUpdate',true);
		},
		methods: {
			
			// getDefaultAddress(){
			// 	this.$request({
			// 		url:'?c=User&a=defaultAddress',
			// 		type:'post'
			// 	}).then(res =>{
			// 		this.defaultAddress = res.data;
			// 	})
			// },
			goShopHome(item){
				const shopInfo = {
					shop_id : item.shop_id,
					shop_title : item.shop_title
				}
				// const shop = JSON.stringify(shopInfo)
				uni.navigateTo({
					url:'/pages/shop_home/shop_home?title=' + item.shop_title + '&id=' + item.shop_id
				})
			},
			
			
			goProduct(item){
				uni.navigateTo({
					url: '/pages/product/index?goods_id='+item.goods_id
				});
			},
			
			// 编辑按钮切换
			chooseSwitchover() {
				this.adminShow = !this.adminShow
			},
			// 增加数量
			chooseAddNum(index, gindex) {
				let list = this.list; // 购物车商品列表
				let goods_num = list[index].cartList[gindex].quantity; // 获取当前数量
				goods_num = Number(goods_num) + 1; // 每点击一次加1
				list[index].cartList[gindex].quantity = goods_num; // 数量
				this.totalPrice();
				this.goodsCountSet(list[index].cartList[gindex].cart_id,1);
			},
			// 减少数量
			chooseMinus(index, gindex) {
				let list = this.list; // 购物车商品列表
				let goods_num = list[index].cartList[gindex].quantity; // 获取当前数量
				if (goods_num <= 1) {
					return
				}
				goods_num = Number(goods_num) - 1; // 每点击一次加1
				list[index].cartList[gindex].quantity = goods_num;
				this.totalPrice();
				this.goodsCountSet(list[index].cartList[gindex].cart_id,0);
			},
			// 选中商品删除
			chooseGoodsDelete() {
				let that = this;
				let selectList = [];
				let list = that.list;
				for(let i=0; i<list.length; i++) {
					for(let j=0; j<list[i].cartList.length; j++) {
						if(list[i].cartList[j].selected){
							selectList.push(list[i].cartList[j].cart_id)
						}
					}
				}
				if(selectList.length == 0){
					return;
				}
				uni.showModal({
					content: "确认删除选中的商品吗?",
					cancelText: "我再想想",
					cancelColor: "#999999",
					confirmText: "删除",
					confirmColor: "#fa436a",
					success(res) {
						if (res.confirm) {
							that.deleteGoods(selectList);
						} else if (res.cancel) {
							console.log("我再想想")
						}
					},
				})
			},
			// 计算总价
			totalPrice() {
				let list = this.list;
				let total = 0;
				let goods_num = 0;
				for (let i = 0; i < list.length; i++) {
					for (let j = 0; j < list[i].cartList.length; j++) {
						if (list[i].cartList[j].selected) {
							total += list[i].cartList[j].sku_sell_price * list[i].cartList[j].quantity;
							goods_num += list[i].cartList[j].quantity;
						}
					}
				}
				this.total = total;
			},
			// 店铺选中反选
			chooseShopSelect(index) {
				let list = this.list;
				list[index].isShop = !list[index].isShop;
				for (let i = 0; i < list[index].cartList.length; i++) {
					list[index].cartList[i].selected = list[index].isShop
				}
				this.checkAllCondition()
				this.totalPrice()
			},
			// 商品选中反选
			chooseGoodsSelect(index, gindex) {
				let list = this.list;
				let count = 0;
				let goodsList = list[index].cartList; // 当前店铺下商品列表
				let goods = goodsList[gindex]; // 当前商品数组
 
				if (goods.selected) {
					list[index].cartList[gindex].selected = false; // 改变当前商品状态
					list[index].isShop = false; // 改变店铺状态
				} else {
					list[index].cartList[gindex].selected = true;
					// 当店铺选中商品数量与店铺总数相等时, 改变店铺状态
					let shopGoodsNum = list[index].cartList.length;			// 店铺总个数
					let goodsArray = list[index].cartList;
					let selectedNum = 0;
					for(var i in goodsArray) {
						if(goodsArray[i].selected) {
							selectedNum++
						}
					}
					if(selectedNum == goodsArray.length) {
						list[index].isShop = true
					} else {
						list[index].isShop = false
					}
				}
				this.checkAllCondition()
				this.totalPrice()
			},
			// 全选条件 店铺全选  反之 
			checkAllCondition() {
				let isCheckAll = this.isCheckAll;
				let list = this.list;					// 购物车列表数据
				let isCheckAllNum = 0;
				for (let i = 0; i < list.length; i++) {
					if(list[i].isShop == true) {
						isCheckAllNum++
					}
				}
				if(isCheckAllNum == list.length) {
					this.isCheckAll = true;
				} else {
					this.isCheckAll = false;
				}
				this.totalPrice()
			},
			// 点击全选
			chooseCheckAll() {
				let list = this.list;
				let isCheckAll = this.isCheckAll;
				if(isCheckAll) {
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
				}
				for(let i=0; i<list.length; i++) {
					list[i].isShop = this.isCheckAll;
					for(let j=0; j<list[i].cartList.length; j++) {
						list[i].cartList[j].selected = this.isCheckAll
					}
				}
				this.totalPrice()
			},
			
			///删除购物车商品
			deleteGoods(selectList){
				this.$request({
					url:'?c=Cart&a=delCart',
					type:'post',
					data:{
						cart_id:selectList.join(',')
					}
				}).then(res =>{
					console.log(res);
					this.getCartList();
				})
			},
			
			///购物车商品数量修改
			goodsCountSet(id,t){
				setTimeout(() =>{
					this.$request({
						url:'?c=Cart&a=upCart',
						type:'post',
						data:{
							cart_id:id,
							type:t
						}
					}).then(res =>{
						console.log(res);
					})
				},1000);
			},
			///结算
			cartPay(){
				// let selectList = [];
				// let list = this.list;
				
				// list.forEach(shopItem => {
				// 	const selected = shopItem.cartList.filter(item => item.selected);
				// 	if (selected.length > 0) {
				// 		selectList.push({
				// 			shop : shopItem.shop_title,
				// 			child : selected
				// 		})
				// 	}
				// });
				
				// if(selectList.length == 0){
				// 	this.$u.toast('请选择商品');	
				// 	return;
				// }
				
				// let p = JSON.stringify(selectList)
				// uni.navigateTo({
				// 	url:'/pages/cart/cart_create_order?pack='+p
				// })
				
				
				
				///新
				let selectList = [];
				
				let objList = [];
				
				let list = this.list;
				list.forEach(shopItem =>{
					const selected = shopItem.cartList.filter(item => item.selected);
					if (selected.length > 0) {
						selected.forEach(idItem =>{	
							objList.push(idItem)
						});
					}
				});
				
				
				if(objList.length == 0){
					this.$u.toast('请选择商品');
					return;
				}
				const special1 = objList.filter(oitem => oitem.section_id == 2);
				const special2 = objList.filter(oitem => oitem.section_id == 6);
				
				if(special1.length != 0 && objList.length != special1.length){
					this.$u.toast('您选择的商品包含生日专区商品，请单独结算');	
					return;
				}
				if(special2.length != 0 && objList.length != special2.length){
					this.$u.toast('您选择的商品包含帮扶专区商品，请单独结算');
					return;
				}
				
				objList.forEach(s =>{
					selectList.push(s.cart_id)
				});
				// if(selectList.length == 0){
				// 	this.$u.toast('请选择商品');	
				// 	return;
				// }
				// console.log(selectList)
				let p = JSON.stringify(selectList)
				uni.navigateTo({
					url:'/pages/cart/cart_create_order_new?pack='+p
				})
			},
			getCartList(){
				this.$request({
					url:'?c=Cart&a=cartList',
					type:'post'
				}).then(res =>{
					// console.log(res)
					uni.stopPullDownRefresh();
					this.$store.commit('setCartUpdate',false);
					if(res.data != null){
						this.list = res.data
						this.list.forEach(item =>{
							item.isShop = false
							item.cartList.forEach(i =>{
								i.selected = false
							})
						});
					}else{
						this.list = [];
					}
					
					
				})
			},
			handleLogin(){
				this.$handleLogin();
			},
			staticResource(path){
				return "https://ysmz.scmzhc.com/static/mini/images/"+path;
			},
		}
	}
</script>
 
<style lang="scss">
	.cart{
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		
	}
	.goods-list {
		margin-bottom: 220rpx;
		.btn-clear {
			display: flex;
			justify-content: space-between;
			margin: 20upx 30upx 20upx;
		}
 
		.yh-cart-row:last-child {
			margin: 0 20upx 20upx;
		}
 
		.yh-cart-row {
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin: 0 20upx 20upx;
 
			.carrier:last-child {
				border-bottom: none;
			}
 
			.carrier {
				border-bottom: 1rpx dashed #EEEEEE;
 
				.shop {
					display: flex;
					align-items: center;
					padding: 30rpx 20rpx;
 
					.left {
						display: flex;
						align-items: center;
 
						.select {
							width: 40rpx;
							margin-right: 25rpx;
						}
 
						.shop-name {
							display: flex;
							align-items: center;
 
							.icon-shop {
								width: 42rpx;
								margin-right: 20rpx;
							}
 
							.name {
								font-size: 32rpx;
								font-weight: bold;
							}
						}
					}
 
					.right {
						width: 30upx;
						margin-left: 22rpx;
					}
				}
			}
		}
	}
	
	 .select{
		width: 40rpx;
		margin-right: 20rpx;
	 }
	.goods-settle-accounts {
		height: 96upx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		margin-bottom: 130rpx;
		border-top: 1rpx solid #F5F5F5;
 
		.left {
			display: flex;
			align-items: center;
 
			.select {
				width: 40upx;
				margin-right: 22rpx;
			}
		}
 
		.right {
			display: flex;
			align-items: center;
 
			.goods-price-total {
				font-size: 29rpx;
			}
 
			.goods-price-total text:nth-child(2) {
				font-size: 22rpx;
				padding-top: 4upx;
				margin-left: 8upx;
				color: #000;
			}
 
			.goods-count-btn {
				font-size: 32upx;
				width: 180upx;
				background-color: #5c8edc;
				color: #fff;
				border-radius: 35upx;
				height: 66upx;
				text-align: center;
				line-height: 66upx;
				margin-left: 20upx;
			}
 
			.goods-delete {
				color: #5c8edc;
				padding: 5upx 20upx;
				border: 1upx solid #5c8edc;
				border-radius: 30upx;
			}
		}
	}
	.to-login {
	    width: 100%;
	    height: 100%;
		padding-bottom: 250rpx;
	    background-color: #fff;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	    position: fixed;
	
	    .to-login-text {
	        color: rgba(153, 153, 153, 1);
	        font-size: 26rpx;
	        padding-bottom: 40rpx;
	    }
	}
	.amount {
		display: flex;
		align-items: center;
		height: 40upx; 
		.num-minus,
		.num-add {
			width: 40rpx;
			text-align: center;
		}
	 
		.num-minus {
			height: 40rpx;
			border-radius: 40rpx;
			background-color: #E6E6E6;
			color: #fff;
		}
	 
		.num-add {
			height: 40rpx;
			border-radius: 40rpx;
			background-color: #FF0000;
			color: #fff;
		}
	 
		.input-price {
			width: 60upx;
			text-align: center;
		}
	}
	.card_medium {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 15rpx;
		padding: 15rpx 20rpx;
	}
	.card_img {
		height: 160rpx;
		width: 160rpx;
		border-radius: 10rpx;
	}
	.med_right {
		// height: 180rpx;
		width: 60%;
	}
	.med_right1 {
		// margin-bottom: 30rpx;
	}
	.med_right2 {
		color: #909090;
		margin-top: 10rpx;
		
	}
	.font12{
		font-size: 25rpx;
	}
	
	.font16{
		font-size: 30rpx;
	}
	.login-btn{
		border-radius: 50rpx;
		padding: 5rpx 50rpx;
		background-color: #5c8edc;
		color: #fff;
	}
	.goods-lose-efficacy-identifying {
		width: 100upx;
		height: 100upx;
		position: absolute;
		z-index: 99;
		right: 0;
		margin-right: 30vw;
	}
</style>
